<template>
  <span
    class="message-icon"
    @click="unreadMessage"
  >
    <i class="iconfont icon-xiaoxi-line icon" />
    <i
      v-if="unreadCount"
      class="message-total"
    >{{ unreadCount > 99 ? '99+' : unreadCount }}</i>
    <span
      v-if="isNew"
      class="new-message-tip"
    >您有新消息</span>
  </span>
</template>

<script>
import { reactive, toRefs, watch } from 'vue'
import { useRouter } from 'vue-router'
import { crmStore } from '@CRM/store'
import { emitter } from '@/utils/bus.js'
export default {
  setup() {
    const router = useRouter()
    const state = reactive({
      unreadCount: crmStore.getters['message/getUnreadCount'],
      isNew: crmStore.getters['message/getIsNewMsg'],
    })

    watch(
      () => crmStore.getters['message/getUnreadCount'],
      (newval, oldval) => {
        state.unreadCount = newval
      }
    )

    watch(
      () => crmStore.getters['message/getIsNewMsg'],
      (newval, oldval) => {
        state.isNew = newval
        console.log(state.isNew)
        if (state.isNew) {
          setTimeout(() => {
            crmStore.commit('message/isNewMessage', false)
          }, 4000)
        }
      }
    )

    const unreadMessage = () => {
      router.push({
        name: 'unreadMessage',
      })
      emitter.emit('reload')
    }

    return {
      ...toRefs(state),
      unreadMessage,
    }
  },
}
</script>

<style lang="scss" scoped>
.message-icon {
  position: relative;
  margin-right: 32px;
  &:hover {
    cursor: pointer;
  }
  .icon {
    font-size: 18px;
    color: rgba($color: #000000, $alpha: 0.65);
  }
  .message-total {
    position: absolute;
    top: -7px;
    left: 7px;
    font-size: 12px;
    line-height: 14px;
    color: #ffffff;
    font-style: normal;
    background: #f73a3a;
    padding: 0px 2px;
    border-radius: 4px;
  }
  .new-message-tip {
    width: 66px;
    position: absolute;
    top: 30px;
    left: -20px;
    font-size: 12px;
    color: #fff;
    background-color: #f73a3a;
    height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 4px;
  }
}
</style>
